<template>
  <div class="hy-table content">
    <el-table ref="tableData" highlight-current-row :data="listData" border stripe class="margin-top10px" style="width: 100%;height:100%" height="100%" @selection-change="handleSelectionChange">
      <el-table-column v-if="showSelectColumn" type="selection" align="center" width="60" 
        :selectable="selectable"></el-table-column>
      <el-table-column v-if="showIndexColumn" type="index" label="序号" align="center" width="80"></el-table-column>
      <template>
        <el-table-column v-for="(propItem, index) in propList" :key="index" v-bind="propItem" align="center"
          show-overflow-tooltip>
          <template #default="scope">
            <slot :name="propItem.slotName" :row="scope.row">
              {{ scope.row[propItem.prop] }}
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="footer pagination" v-if="showFooter">
      <slot name="footer">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page.currentPage" background :page-size="page.pageSize" :page-sizes="[10, 20, 30]"
          layout=" prev, pager, next, jumper" :total="page.total">
        </el-pagination>
      </slot>
    </div>
  </div>
</template>

<script>
import { mymixin } from "@/utils/mixin";
export default {
  props: {
    listData: {
      type: Array,
      required: true,
    },
    propList: {
      type: Array,
      required: true,
    },
    showIndexColumn: {
      type: Boolean,
      default: true,
    },
    showSelectColumn: {
      type: Boolean,
      default: false,
    },
    page: {
      type: Object,
      default: () => ({ currentPage: 1, pageSize: 10, total: 10 }),
    },
    showFooter: {
      type: Boolean,
      default: true,
    },
  },
  mixins: [mymixin],
  mounted() {
    // console.log(this.listData, this.propList);
  },
  methods: {
    handleSizeChange() {
      this.$emit("handleSizeChange", this.page.pageSize);
    },
    handleCurrentChange(row) {
      this.$emit("handleCurrentChange", row);
    },
    handleSelectionChange(row) {
      this.$emit("handleSelectionChange", row);
    },
  },
};
</script>

<style scoped lang="scss">
.content{
  height: 100%;
}
.pagination {
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>
